<template>
	<view class="Bookcase">
		<!-- 排序导航 -->
		<view class="Bookcase-TabCur">
			<view :class="[TabCur==0 ? 'text-orange' : 'text-grey']" @click="tabSelect(0)">默认排序</view>
			<view :class="[TabCur==1 ? 'text-orange' : 'text-grey']" @click="tabSelect(1)">字母排序</view>
		</view>
		<!-- 列表数据 -->
		<CardGrid @delete="deleteFn" type="Bookcase" :list="value.list" @handle="readbookNav"></CardGrid>
		<!-- ios兼容 -->
		<view class="ios-safe"></view>
		<!-- 对话框 -->
		<Modal :show="deleteOption.show" @confirm="removeFromSetFn" @cancel="cancelModelFn" title="提示">
			<view class="padding">
				{{deleteOption.name}}，是否确认删除?
			</view>
		</Modal>
	</view>
</template>

<script>
	import CardGrid from '@/plugin/card_grid.vue';
	import Modal from '@/plugin/modal.vue';
	
	import Share from '@/utils/share.js';
	
	import * as api from '@/api/Bookcase/index.js'
	export default {
		mixins:[Share],
		components: {
			CardGrid,
			Modal
		},
		data() {
			return {
				id:null,
				// 排序导航值
				TabCur: 0,
				value:{
					list:[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
				},
				// 将要删除的绘本
				deleteOption: {
					show: false
				},
				// 分享
				share: {
					title: '绘本书架',
					path: '/pages/Bookcase/index', // 全局分享的路径
					imageUrl: '', // 全局分享的图片(可本地可网络)
				}
			}
		},
		onLoad(options) {
			if(options.id) {
				this.id=options.id;
				this.$set(this.share,'path',`${this.share.path}?id=${options.id}`)
				this.getBookFn();
			}
		},
		methods: {
			// 删除弹窗
			deleteFn(item){
				this.deleteOption={
					show:true,
					...item
				}
			},
			// 删除绘本
			async removeFromSetFn(){
				try{
					let res=await api.removeFromSet(this.id,this.deleteOption.id);
					if(res.code===0){
						this.getBookFn();
					}
				}finally{
					this.cancelModelFn();
				}
			},
			// 关闭弹出框
			cancelModelFn() {
				this.$set(this.deleteOption,'show',false);
			},
			// 请求绘本数据
			async getBookFn(){
				if(!this.id && this.id!==0) return; 
				let res=await api.bookList(this.id,this.TabCur===0 ? 'default' : 'name');
				if(res.code===0) {
					uni.setNavigationBarTitle({
						title:res.data['name']
					})
					this.share={
						title: res.data.name,
						path: `${this.share.path}?id=${this.id}`, // 全局分享的路径
						imageUrl: '', // 全局分享的图片(可本地可网络)
					}
					this.value=res.data;
				}
			},
			// 排序导航选择功能
			tabSelect(value) {
				this.TabCur = value;
				this.getBookFn();
			},
			// 跳转读书页面
			readbookNav(value){
				uni.navigateTo({
					url:'/pages/ReadBook/index?id='+value.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.Bookcase {
		.Bookcase-TabCur {
			display: flex;
			padding: 20upx 0;

			>view {
				text-align: center;
				margin: 0 20upx;
			}
		}
	}
</style>